import React from 'react';
import { Form, Select, Input, Button } from 'antd';
import { useIntl, FormattedMessage } from 'umi';

export default function ProForm(props) {
  const { onSubmit, columns, initialValues } = props;
  const translate = useIntl();
  const [form] = Form.useForm();
  const renderForm = (item) => {
    switch (item.valueType) {
      case 'select':
        return (
          <Select placeholder={`${translate.formatMessage({ id: 'common.pleaseSelect' })}${item.title}`}>
            {
              Array.from(item.valueEnum || []).map(option => {
                console.log(option);
                return <Select.Option value={option[item.dataIndex]} key={option.value}>{option.text}</Select.Option>;
              })
            }
          </Select>
        );
      case 'textarea':
        return <Input.TextArea placeholder={`${translate.formatMessage({ id: 'common.pleaseEnter' })}${item.title}`} />;
      default:
        return <Input placeholder={`${translate.formatMessage({ id: 'common.pleaseEnter' })}${item.title}`} />;
    }
  };


  return (
    <Form form={form} layout="vertical" onFinish={onSubmit} initialValues={initialValues}>
      {
        columns?.map(item => {
          if (item.hideInForm) return null;
          return (
            <Form.Item name={item.dataIndex} label={item.title} {...item.formItemProps} key={item.dataIndex}>
              {renderForm(item)}
            </Form.Item>
          );
        })
      }
      <Form.Item style={{ textAlign: "right" }}>
        <Button type="primary" htmlType="submit">{translate.formatMessage({ id: 'common.submit', defaultMessage: "提交" })}</Button>
      </Form.Item>
    </Form >
  );
}
